<template>
  <div>
      <span>后台首页</span> <span>></span> <span>订单列表</span>
    </div>
  <div id='box'>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all">
        <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click='gocreate'> <span>导出数据</span> </el-button>
            <el-button type="danger"> <span>批量删除</span> </el-button>
          </div>
          <div class="quanburight" v-show="book">
            <input type="text" placeholder="要搜索的商品名称" />
            <el-button type="info"> <span>搜索</span></el-button>
            <el-button @click="setbool"><span>高级搜索</span></el-button>
          </div>
        </div>
        <div class="tanchu" v-show="bool">
          <div class="tanchu_1">
            <div class="clearfix">
              <span>高级搜索</span>
              <span
                @click="
                  () => {
                    (bool = false), (book = true);
                  }
                "
                >收起</span
              >
            </div>
            <div style="padding: 20px">
              <form class="el-form el-form- -inline">
                <div class="el-form-item mb-0">
                  <span>商品名称</span>
                  <input type="text" placeholder="商品名称" />
                </div>
                <div class="el-form-item mb-0">
                  <span>商品分类</span>
                  <el-select
                    v-model="value"
                    clearable
                    placeholder="请选择商品分类"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="el-form-item mb-0">
                  <div class="el-form-item__content">
                    <button
                      type="button"
                      class="el-button el-button--info el-button--mini"
                    >
                      <span> 搜索</span></button
                    ><button
                      type="button"
                      class="el-button el-button--default el-button--mini"
                    >
                      <span>清空筛选条件</span>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="待付款" name="nopay">
       <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click='gocreate'> <span>导出数据</span> </el-button>
            <el-button type="danger"> <span>批量删除</span> </el-button>
          </div>
          <div class="quanburight" v-show="book">
            <input type="text" placeholder="要搜索的商品名称" />
            <el-button type="info"> <span>搜索</span></el-button>
            <el-button @click="setbool"><span>高级搜索</span></el-button>
          </div>
        </div>
        <div class="tanchu" v-show="bool">
          <div class="tanchu_1">
            <div class="clearfix">
              <span>高级搜索</span>
              <span
                @click="
                  () => {
                    (bool = false), (book = true);
                  }
                "
                >收起</span
              >
            </div>
            <div style="padding: 20px">
              <form class="el-form el-form- -inline">
                <div class="el-form-item mb-0">
                  <span>商品名称</span>
                  <input type="text" placeholder="商品名称" />
                </div>
                <div class="el-form-item mb-0">
                  <span>商品分类</span>
                  <el-select
                    v-model="value"
                    clearable
                    placeholder="请选择商品分类"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="el-form-item mb-0">
                  <div class="el-form-item__content">
                    <button
                      type="button"
                      class="el-button el-button--info el-button--mini"
                    >
                      <span> 搜索</span></button
                    ><button
                      type="button"
                      class="el-button el-button--default el-button--mini"
                    >
                      <span>清空筛选条件</span>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="待发货" name="noship">
       <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click='gocreate'> <span>导出数据</span> </el-button>
            <el-button type="danger"> <span>批量删除</span> </el-button>
          </div>
          <div class="quanburight" v-show="book">
            <input type="text" placeholder="要搜索的商品名称" />
            <el-button type="info"> <span>搜索</span></el-button>
            <el-button @click="setbool"><span>高级搜索</span></el-button>
          </div>
        </div>
      
      </el-tab-pane>
      <el-tab-pane label="已发货" name="shiped">
        <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click='gocreate'> <span>导出数据</span> </el-button>
            <el-button type="danger"> <span>批量删除</span> </el-button>
          </div>
          <div class="quanburight" v-show="book">
            <input type="text" placeholder="要搜索的商品名称" />
            <el-button type="info"> <span>搜索</span></el-button>
            <el-button @click="setbool"><span>高级搜索</span></el-button>
          </div>
        </div>
   
      </el-tab-pane>
      <el-tab-pane label="已收获" name="received">
       <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click='gocreate'> <span>导出数据</span> </el-button>
            <el-button type="danger"> <span>批量删除</span> </el-button>
          </div>
          <div class="quanburight" v-show="book">
            <input type="text" placeholder="要搜索的商品名称" />
            <el-button type="info"> <span>搜索</span></el-button>
            <el-button @click="setbool"><span>高级搜索</span></el-button>
          </div>
        </div>
       
      </el-tab-pane>
      <el-tab-pane label="已完成" name="finish">
         <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click='gocreate'> <span>导出数据</span> </el-button>
            <el-button type="danger"> <span>批量删除</span> </el-button>
          </div>
          <div class="quanburight" v-show="book">
            <input type="text" placeholder="要搜索的商品名称" />
            <el-button type="info"> <span>搜索</span></el-button>
            <el-button @click="setbool"><span>高级搜索</span></el-button>
          </div>
        </div>
     
      </el-tab-pane>
       <el-tab-pane label="已关闭" name="closed">
        <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click='gocreate'> <span>导出数据</span> </el-button>
            <el-button type="danger"> <span>批量删除</span> </el-button>
          </div>
          <div class="quanburight" v-show="book">
            <input type="text" placeholder="要搜索的商品名称" />
            <el-button type="info"> <span>搜索</span></el-button>
            <el-button @click="setbool"><span>高级搜索</span></el-button>
          </div>
        </div>
     
      </el-tab-pane>
       <el-tab-pane label="退款中" name="refunding">
        <div class="quanbu">
          <div class="quanbuleft">
            <el-button type="success" @click='gocreate'> <span>导出数据</span> </el-button>
            <el-button type="danger"> <span>批量删除</span> </el-button>
          </div>
          <div class="quanburight" v-show="book">
            <input type="text" placeholder="要搜索的商品名称" />
            <el-button type="info"> <span>搜索</span></el-button>
            <el-button @click="setbool"><span>高级搜索</span></el-button>
          </div>
        </div>
      </el-tab-pane>
      <list :tableData="tableData" :idn="idn"> </list>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="sum1"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="num"
        >
        </el-pagination>
      </div>

    </el-tabs>
  </div>
</template>
<script>
import list from "@/components/dingdanguanlilist.vue";
import { getorder } from "@/api/index";
export default {
  components: {
    list,
  },
  data() {
    return {
      activeName: "all",
      tableData: [],
      idn: "all",
      sum2: 10, //每页 sum2 条
      sum1: 1, //当前页 sum1
      sum: 0,
      num:0,
      bool: false,
      book: true,
      options: [
        {
          value: "选项1",
          label: "dddd",
        },
        {
          value: "选项2",
          label: "荣X手机",
        },
        {
          value: "选项3",
          label: "智慧屏幕22",
        },
        {
          value: "选项4",
          label: "笔记本",
        },
      ],
      value: "",
    };
  },
  methods: {
    setbool() {
      //高级搜索开关
      this.bool = true;
      this.book = false;
    },
    handleClick(tab) {
       console.log(tab.props.name,this.idn );
      this.idn = tab.props.name;
      this.setarr(this.sum1, this.sum2, tab.props.name);
    },
    //获取数据
    async setarr(a, b, val) {
      let res = await getorder(a, b, val);
      if (res.data.msg == "ok") {
        console.log(res.data.data.list);
        this.tableData = res.data.data.list;
        this.sum1 = a;
        this.sum2 = b;
        this.idn = val;
        this.num=res.data.data.totalCount
      }
    },
    async handleSizeChange(val) {
      this.setarr(this.sum1, val, this.idn);
    },
    async handleCurrentChange(val) {
      this.setarr(val, this.sum2, this.idn);

      //   this.$axios
      //     .get(
      //       `http://ceshi5.dishait.cn/admin/goods/${val}?limit=${this.sum2}&tab=all`,
      //       {
      //         headers: {
      //           token: this.$store.state.token,
      //         },
      //       }
      //     )
      //     .then((res) => {
      //       console.log(res.data.data.list);
      //       this.tableData = res.data.data.list;
      //       this.sum = res.data.data.totalCount;
      //       this.sum1 = val;
      //     });
    },
    gocreate(){
                  this.$router.push('/shop/goods/create')
    }
  },
  mounted() {
    this.setarr(this.sum1, this.sum2, "all");
  },
};
</script>
<style >
#box{
    padding-bottom: 60px;
}
.block {
  position: fixed;
  left: 200px;
  bottom: 0;
  border: 1px solid #ccc;
  width: 100%;
  height: 60px;
  z-index: 10;
  background: #fff;
  display: flex;
}
.cell {
  text-align: center !important;
}
.qwe {
  width: 40px !important;
  height: 40px !important;
}
.el-form-item span {
  margin-right: 10px;
}
.el-form-item {
  display: flex;
  --font-size: 14px;
  margin-bottom: 0px;
  align-items: center;
  margin-right: 20px;
  margin-top: 20px;
}

.clearfix span:nth-child(1) {
  font-size: 14px;
  margin-left: 20px;
}
.clearfix span:nth-child(2) {
  color: teal;
  margin-right: 20px;
}
.clearfix::before {
  display: none;
}
.clearfix::after {
  display: none;
}
.tanchu {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 4px;
  border: 1px solid #ebeef5;

  overflow: hidden;
  color: #303133;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
  background-color: #f8f9fa !important;
  transition: 0.3s;
}
.clearfix {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
}
.is-leaf {
  text-align: center !important;
}
.el-table th > .cell {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
}
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
.el-button {
  padding: 7px 15px !important;
  font-size: 12px !important;
  border-radius: 3px !important;
}
.quanbu {
  display: flex;
  justify-content: space-between;
}
.quanbu input {
  height: 28px;
  line-height: 28px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 150px;
  outline: none;
  padding: 0 15px;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  font-size: 12px;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  margin-right: 15px;
}
</style>
